<template>
    <div class="rank-list">
      <div class="rank-title">{{ title }}</div>
      <div class="rank-items">
        <el-card v-for="item in list" :key="item.id" class="rank-item">
          <div>{{ item.name }}</div>
          <!-- 这里可以添加更多的数据预览 -->
        </el-card>
        <el-button type="text" @click="loadMore">更多</el-button>
      </div>
    </div>
  </template>
  
  <script>
  import { defineComponent } from 'vue';
  import { ElCard, ElButton } from 'element-plus';
  
  export default defineComponent({
    name: 'RankList',
    components: {
      ElCard,
      ElButton
    },
    props: {
      title: String,
      list: Array
    },
    emits: ['loadMore'],
    methods: {
      loadMore() {
        this.$emit('loadMore');
      }
    }
  });
  </script>
  
  <style scoped>
  .rank-list {
    margin-right: 20px; /* 右边距 */
  }
  
  .rank-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .rank-items {
    display: flex;
    flex-direction: column;
  }
  
  .rank-item {
    margin-bottom: 10px;
  }
  
  /* 可以添加更多的样式来美化排行榜项 */
  </style>